<template>
  <el-dialog :before-close="addubmit" v-model="store.state.cinemaView.navBool" title="添加电影">
    <el-form :model="store.state.cinemaView.addDity" :label-width="formLabelWidth">
      <el-form-item label="排片ID" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.id" autocomplete="off" />
              </el-form-item>
              <el-form-item label="电影名" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="详情" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.yuan" autocomplete="off" />
              </el-form-item>
              <el-form-item label="海报" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.tp" autocomplete="off" />
              </el-form-item>
              <el-form-item label="影厅" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.ting" autocomplete="off" />
              </el-form-item>
              <el-form-item label="放映日期" :label-width="formLabelWidth" style="width: 360px;">
                  <el-date-picker v-model="value2" type="dates" placeholder="请选择放映日期" />
              </el-form-item>
              <el-form-item label="放映时间" :label-width="formLabelWidth" style="width: 360px;">
                  <el-date-picker v-model="value3" type="datetime" placeholder="请选择放映时间" format="YYYY/MM/DD hh:mm:ss"
                      value-format="x" />
              </el-form-item>
              <el-form-item label="售价" :label-width="formLabelWidth" style="width: 360px;">
                  <el-input v-model="form.monny" autocomplete="off" />
              </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handelsubmit">取消</el-button>
        <el-button type="primary" @click="addubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus';
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import http from '../api/link';

const store = useStore();
// const dialogTableVisible = ref(false);
// const dialogFormVisible = ref(false);
const formLabelWidth = '140px';
const emit = defineEmits(['getlist']);
const form = reactive<any>({
  name: '',
  ting: '',
  yuan: '',
  date2: '',
  monny: '',
  id: '',
  tp: '',
});

const value2 = ref('');
const value3 = ref('');
// 确认添加
const addubmit = (formEl: FormInstance | undefined) => {
  const data = {
    id: form.id,
    moviename: form.name,
    name: form.yuan,
    data: form.ting,
    moviedata: value2.value,
    time: value3.value,
    monny: form.monny,
    tp: form.tp,
  };
  http('/RowPiece/', 'POST', data).then((res: any) => {
    if (res.status === 201) {
      ElMessage({
        type: 'success',
        message: '添加成功！',
      });
      emit('getlist');
      Object.keys(form).map((item) => {
        delete form[item];
      });
    } else {
      ElMessage({
        type: 'error',
        message: '添加失败！',
      });
    }
    store.commit('SET_NAV');
  });
};
// 取消
const handelsubmit = () => {
  store.commit('SET_NAV');
  ElMessage({
    type: 'info',
    message: '已取消！',
  });
};

</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
/* .el-input {
     width: 300px;
   } */
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
